<template>
  <div>data-fetching</div>
</template>

<script>
export default {
  created() {
    /**
     * 这里可以获取数据
     */
    alert("create 获取数据");
  },
  methods: {
    sayHello() {
      /**
       * 也可以在确定路由之前获取，但是要使用 vm 调用组件中的方法
       */
      alert("beforeRouteEnter 获取数据");
    },
  },
  // eslint-disable-next-line no-unused-vars
  beforeRouteEnter(to, from, next) {
    /**
     *  beforeRouteEnter 无法获取this属性，但是可以通过参数调用VM
     *  注意，这里看起来是在路由跳转之前调用的方法，但是方法确实是在页面创建之后执行的
     *  甚至是在 create 方法之后执行的，因为beforeRouteEnter调用的方法需要组件初始化完成之后才能调用
     */
    next((vm) => {
      vm.sayHello();
    });
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
};
</script>

<style lang="scss" scoped></style>
